<template>
  <div>
    <h3>房号增加</h3>
    XXXX
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td align="right">房号名称</td>
          <td>
            <input type="text" v-model="info.HouseNoName" />
          </td>
        </tr>
        <tr>
          <td align="right">门店名称</td>
          <td>
            <select v-model="info.ShopId">
              <option value="">请选择</option>
              <option :value="item.Id" v-for="item in data1.list">
                {{ item.ShopName }}
              </option>
            </select>
          </td>
        </tr>
        <tr>
          <td align="right">房型名称</td>
          <td>
            <select v-model="info.HouseTypeId">
              <option value="">请选择</option>
              <option :value="item.Id" v-for="item in data2.list">
                {{ item.HouseTypeName }}
              </option>
            </select>
          </td>
        </tr>
        <tr>
          <td align="right">房态</td>
          <td>
            <select v-model="info.HouseState">
              <option value="">请选择</option>
              <option :value="1">空闲</option>
              <option :value="2">已预约</option>
              <option :value="3">已入住</option>
            </select>
          </td>
        </tr>
        <tr>
          <td align="right">房号状态</td>
          <td>
            <input
              type="radio"
              name="state"
              v-model="info.State"
              :value="1"
            />发布
            <input
              type="radio"
              name="state"
              v-model="info.State"
              :value="0"
            />不发布
          </td>
        </tr>
        <tr>
          <td align="right"></td>
          <td>
            <input
              type="button"
              value="确定"
              class="btn btn-primary"
              @click="ok"
            />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();

let info: any = reactive({
  HouseNoName: '',
  ShopId: '',
  HouseTypeId: '',
  HouseState: 1,
  State: 1,
});

//声明一个变量存储获取列表向后端传递的数据
let info1: any = reactive({
  pageIndex: 1, //页码
  pageSize: 100, //页容量
  shopName: '',
  shopAddress: '',
});

//声明一个变量接受后端返回的数据
let data1: any = reactive({
  list: [],
  totalCount: 0, //总条数
  totalPage: 0, //总页数
});

//声明一个变量存储获取列表及查询条件的数据
let info2: any = reactive({
  pageIndex: 1,
  pageSize: 100,
  houseTypeName: '',
  area1: '',
  area2: '',
});

//接受后端返回列表数据
let data2: any = reactive({
  totalCount: 0,
  totalPage: 0,
  list: [],
});

onMounted(() => {
  getShopList();
  getList();
});

//1.读取门店和房型列表

//获取门店列
const getShopList = () => {
  axios({
    url: '/api/Shops/GetShopList',
    method: 'get',
    params: info1,
  })
    .then((res) => {
      console.log(res);
      //第二种赋值
      Object.assign(data1, res.data);
    })
    .catch((err) => {
      console.log(err);
    });
};

//获取房型列表
const getList = () => {
  axios({
    url: '/api/Houses/GetHouseTypeList',
    method: 'get',
    params: info2,
  })
    .then((res) => {
      console.log(res);
      Object.assign(data2, res.data);
    })
    .catch((err) => {
      console.log(err);
    });
};

const ok = () => {
  //1.有效性判断
  if (info.HouseNoName == '') {
    alert('房型名称不能为空');
    return;
  }
  if (info.ShopId == '') {
    alert('门店名称不能为空');
    return;
  }
  if (info.HouseTypeId == '') {
    alert('房型名称不能为空');
    return;
  }
  if (info.HouseState == '') {
    alert('房态不能为空');
    return;
  }
  //2.发送网络请求
  axios({
    url: '/api/Houses/HouseNoAdd',
    method: 'post',
    data: info,
  })
    .then((res) => {
      console.log(res);
      if (res.data > 0) {
        alert('添加成功');
        router.push('/houseNoList');
      } else if (res.data == -1) {
        alert('房号名称重复');
        return;
      } else {
        alert('添加失败');
        return;
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped></style>
